<template>
	<view class="container">
		<view class="tui-box-upload">
			<tui-upload :value="imageData" :serverUrl="serverUrl" :header="header" @complete="compile" @remove="remove"></tui-upload>
			<tui-input v-model="form.title" placeholder="请输入标题哦～"></tui-input>
			<tui-textarea v-model="form.content"
			 :maxlength="1000"
			 :isCounter="true"
			 placeholder="添加正文"></tui-textarea>
			 <view class="tui-tag-box">
				 <block v-for="(item, index) in tagList" :key="index">
					 <tui-tag 
					 margin="20rpx 10rpx 0rpx 0rpx"
					 padding="15rpx"
					 :plain="!item.flag"
					 :type="typeList[index%5]" 
					 @click="tag(index)">
							 {{item.value}}
					 </tui-tag>
				 </block>
			 </view>
			 <tui-button @click="addArticle()">提交</tui-button>
		</view>
		<!--顶部消息-->
		<tui-tips ref="toast" :backgroundColor="backgroundColor"></tui-tips>
	</view>
</template>

<script>
import tui from '../../common/httpRequest'
const formValid = require("@/components/common/tui-validation/tui-validation.js")

export default {
	data() {
		return {
			imageData: [],//初始化图片
			//上传接口地址
			serverUrl: tui.uploadUrl(),
			tagList: [],
			typeList: ['primary', 'danger', 'warning', 'green', 'gray','black','light-blue','light-brownish','light-orange','light-green'],
			form: {
				title: '',
				content: '',
				tags: '',
				imgUrl: ''
			},
			header: {},
			rules: [{
				name: "title",
				rule: ["required"],
				msg: ["请输入标题"]
			},{
				name: "content",
				rule: ["required"],
				msg: ["请输入内容"]
			},{
				name: "imgUrl",
				rule: ["required"],
				msg: ["请选择照片"]
			},{
				name: "tags",
				rule: ["required"],
				msg: ["请选择标签"]
			}],
			toast: false,
			backgroundColor: '#ff7900'
		};
	},
	async onLoad() {
		await this.$onLaunched;
		this.header = {
			appToken: uni.getStorageSync("app_token")
		}
		this.getArticleType();
	},
	methods: {
		result: function(e) {
			console.log(e)
			this.imageData = e.imgArr;
		},
		remove: function(e) {
			//移除图片
			console.log(e)
			let index = e.index
		},
		randomNum(min, max){
			return Math.floor(Math.random() * (max - min + 1)) + min;
		},
		tag(index){
			this.tagList[index]['flag'] = !this.tagList[index]['flag'];
		},
		compile(e){
			console.log(e);
			this.imageData = e.imgArr;
		},
		getArticleType(){
			let _this = this;
			_this.$api.getDictDataByType("article_type").then(res => {
				if(res.success){
					let typeArr = [];
					res.result.forEach(item => {
						typeArr.push({
							value: item.title,
							flag: false
						});
					})
					_this.tagList = typeArr;
				}
			})
		},
		addArticle(){
			let _this = this;
			let formData = this.form;
			let imgUrl = this.imageData.join(",");
			let tagArr = [];
			this.tagList.forEach(e => {
				if(e.flag){
					tagArr.push(e.value);
				}
			})
			let tags = tagArr.join(",");
			formData.imgUrl = imgUrl;
			formData.tags = tags;
			
			console.log(formData);
			let checkRes = formValid.validation(formData, this.rules);
			if (!checkRes) {
				_this.$api.addArticle(formData).then(res => {
					// _this.backgroundColor = '#19be6b';
					// let options = {
					// 	msg: res.result,
					// 	duration: 2000
					// };
					// this.$refs.toast.showTips(options);
					if(res.success){
						uni.navigateTo({
							url:"/pages/comp/msg-scene?title=发布成功&desc=恭喜您新文章发布成功"
						});
					}
				})
			} else {
				this.backgroundColor = '#ff7900';
				let options = {
					msg: checkRes,
					duration: 2000
				};
				this.$refs.toast.showTips(options);
			}
			
		}
	}
};
</script>

<style>
page {
		background-color: #fff;
	}

	.container {
		padding: 20rpx 0 120rpx 0;
		box-sizing: border-box;
	}

	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}

	.tui-box-upload {
		padding-left: 25rpx;
		box-sizing: border-box;
	}
	.tui-tag-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 26rpx;
	}
</style>
